<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script type="text/javascript" src="../../vue/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>当前值是：{{ n }}</h2>
        <button @click="add">点我n++</button>
    </div>

    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                n: 1,
            },
            methods: {
                add() {
                    this.n++;
                }
            },
            // 在数据监测和数据代理之前
            beforeCreate() {
                console.log('beforeCreate', this);
            },
            // 在数据监测和数据代理之后
            created() {
                console.log('created', this);
            },
            // 挂在之前（模版已经编译好了，只不过是还没有放在页面上）
            beforeMount() {
                console.log('beforeMount', this);
            },
            mounted() {
                console.log('mounted', this);
            },
            // 页面渲染前（此时页面中的数据还未更新，但是data中的数据已经是最先的啦）
            beforeUpdate() {
                console.log('beforeUpdate', this.n);
            },
            // 页面更新后调用
            updated() {
                console.log('updated', this.$el);
            }            
        })
    </script>
</body>
</html>